<template>
    <component is="a-modal" v-model:visible="visible" :width="1200" :title="title" :mask-closable="false"
      :ok-loading="loading" @cancel="close" @before-ok="submit" >
        <a-descriptions title="" :column="4" bordered size="large">
        <a-descriptions-item label="售后ID" :span="1">{{ detailInfo.info?.id }}</a-descriptions-item>
        <a-descriptions-item label="状态" :span="1">{{ detailInfo.info?.state_text }} {{ detailInfo.info?.check_msg  }}</a-descriptions-item>
        <a-descriptions-item label="主订单ID" :span="1">{{ detailInfo.info?.user?.true_name }}</a-descriptions-item>
        <a-descriptions-item label="申请时间" :span="1">{{ detailInfo.info?.area?.name }}</a-descriptions-item>
        <a-descriptions-item label="退款状态" :span="1">{{ detailInfo.info?.caiwu_state_text}}</a-descriptions-item>
        <a-descriptions-item label="应退款" :span="1">{{ detailInfo?.refundOrderTotal}}</a-descriptions-item>
        <a-descriptions-item label="已退款" :span="1">{{ detailInfo.info?.tuikuan_num}}</a-descriptions-item>
        <a-descriptions-item label="会员名" :span="1">{{ detailInfo.info?.user_name }}</a-descriptions-item>

        <a-descriptions-item label="结算业绩ID" :span="1">{{ detailInfo?.xiOrderData?.three_tid}}</a-descriptions-item>
        <a-descriptions-item label="结算业绩条数" :span="1">{{ detailInfo?.xiOrderData?.num}}</a-descriptions-item>
        <a-descriptions-item label="结算业绩订单额" :span="1">{{ detailInfo?.xiOrderData?.order_total }}</a-descriptions-item>
       
      </a-descriptions>
      
      <div style="margin:10px 0"></div>
      <a-table :columns="columns" :data="detailInfo.sku_list" :stripe="true" :pagination="false">
  
      </a-table>
      <a-descriptions title="" :column="4" bordered size="large" style="margin-top: 20px;">
        <a-descriptions-item label="兑换品运费" :span="4">{{ detailInfo.info?.freight_num }}(¥ {{ detailInfo.info?.freight_num_cny }})</a-descriptions-item>
        <a-descriptions-item label="总数量" :span="4">{{ detailInfo?.refundNum }}</a-descriptions-item>
        <a-descriptions-item label="总金额" :span="4">{{ detailInfo?.refundOrderTotal }}</a-descriptions-item>
      </a-descriptions>

      <div style="margin:10px 0"></div>
      <a-table :columns="columns_2" :data="detailInfo.payList" :stripe="true" :pagination="false">
  
      </a-table>
      <div style="margin:20px 0"></div>

      <a-form
          ref="formRef"
          :model="formData"
          :rules="rules"
          :auto-label-width="true"
        >
          <a-form-item label="审核操作" field="state">
            <sa-radio :data="RADIO" v-model="formData.state"></sa-radio>
          </a-form-item>
          <a-form-item label="审核备注" field="admin_note" style="width: 70%;">
            <a-input v-model="formData.admin_note" placeholder="请输入" allow-clear />
          </a-form-item>
          <a-form-item label="操作密码" field="admin_pay_password" style="width: 70%;">
            <a-input-password v-model="formData.admin_pay_password" placeholder="请输入" />
          </a-form-item>
          <a-form-item label="谷歌验证码" field="google_code">
            <a-input v-model="formData.google_code" placeholder="请输入" style="width: 70%;"/>
          </a-form-item>
        </a-form>
     
  
  
    </component>
  </template>
  
  <script setup>
  import { ref, reactive, computed, watch, onBeforeUnmount, onMounted } from "vue";
  import { Message } from "@arco-design/web-vue";

  import AsApi from '@/api/system/afterSale'
  import SaRadio from '@cps/sa-radio/index.vue'
  import { throttle } from "lodash"; 
  import tool from '@/utils/tool'
  import ENUMS from '@/utils/enums'
  const emit = defineEmits(["success"]);
  const visible = ref(false);
  const loading = ref(false);
  const formRef=ref()
  const spinLoading = ref(false)
  let title = computed(() => {
    return "同意退款"
  });
const RADIO = [
    { value: 0, title: '待审核' },
    { value: 1, title: '通过审核' },
  ]
  const formData = reactive({
    id:'',
      google_code: '',
      admin_note: '',
      state:0,
    admin_pay_password:'',
  })
  const rules = ref({
    state: [{ required: true, message: "请选择" }],
      google_code: [{ required: true, message: "请输入" }],
      admin_pay_password: [{ required: true, message: "请输入" }],
  });
  const columns = reactive([
    { title: '退款商品', dataIndex: 'sku', width: 200 },
    { title: '商品名称', dataIndex: 'name', width: 200 },
    { title: '退款数量', dataIndex: 'num', width: 120 },
    { title: '退款金额', dataIndex: 'price_total', width: 120 },
  ])
  const columns_2 = reactive([
    { title: '支付方式', dataIndex: 'method_text', width: 200 },
    { title: '支付金额', dataIndex: 'pay_num', width: 200 },
    { title: '时间', dataIndex: 'create_time', width: 120 },
  ])
  
  const detailInfo = ref({})
  const getData = async () => {////在頁面打開之前須加載完成要不然播放报錯
    const { data } = await AsApi.refund_agree_info(formData.id)
    detailInfo.value = { ...data }    
  }

// 打开弹框
const submit = throttle(async (done) => {
    const validate = await formRef.value?.validate();
    if (!validate) {
      loading.value = true;
      try {
           let dats={...formData}
            const {data}=await AsApi.refuse_refund(dats)
            Message.success('操作成功')
           emit('success')
           done(true);
            setTimeout(() => {
                loading.value = false;
                visible.visible=false
                
        }, 500);
      } catch {
        loading.value = false;
      }
    }
    done(false);

}, 100);
const open = async (data) => {
    formRef.value?.resetFields();
    detailInfo.value={}
    formData.id=data.id
    await getData()
    visible.value = true;
  };
  // 关闭弹窗
  const close = () => {
    visible.value = false
  };
  defineExpose({ open, getData });
  </script>